<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
    <legend>权限分配</legend>
<div id="test1" class="demo-transfer"></div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

</fieldset>

    <a class="layui-btn"   lay-event="addStock" href="/gorole">确认</a>
</center>
</body>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script type="text/javascript" src="/js/js/jquery-3.1.1.min.js"></script>
<script>
    layui.use(['transfer', 'layer', 'util'], function(){
        var $ = layui.$
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util;

        //模拟数据
        var data1 = [
            {"value": "1", "title": "小区管理员"}
            ,{"value": "2", "title": "社区管理员"}
            ,{"value": "3", "title": "超级管理员"}
        ]


        //基础效果
        transfer.render({
            elem: '#test1'
            ,data: data1
        })
        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function(othis){
                var getData = transfer.getData('key123'); //获取右侧数据
                layer.alert(JSON.stringify(getData));
            }
            ,reload:function(){
                //实例重载
                transfer.reload('key123', {
                    title: ['文人', '喜欢的文人']
                    ,value: ['2', '5', '9']
                    ,showSearch: true
                })
            }
        });

    });

    function list() {
        location.reload("/gorole")
    }

</script>
</html>